<!--
 * @Author: 汪军 624473119@qq.com
 * @Date: 2023-10-10 18:15:53
 * @LastEditors: 汪军 624473119@qq.com
 * @LastEditTime: 2023-10-19 10:36:32
 * @FilePath: \ekee-web\src\views\end\easy-link\EasyLink.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template lang="pug">
.deliver-goods
  .title.flex.justify-center.bold.mb4 核销
  .form-content.flex
    .require.w100
      el-form(
          ref="formRef",
          :model="form",
          :rules="rules",
          label-position="left",
          label-width="100px",
          status-icon
        )
          el-form-item(label="核销金额：", prop="money")
            el-input(v-model="form.money", placeholder="请输入", type="number" clearable)
      .flex.justify-center.mt4.mb4
        el-button.btn(
          type="primary",
          size="large",
          plain,
          round,
          @click="onCancel(formRef)"
        ) 取消
        el-button.btn(
          type="primary",
          size="large",
          round,
          @click="onConfirm(formRef)"
        ) 确认
</template>
    
    <script setup>
import { onMounted, ref } from "vue";

const props = defineProps({
  rowId: "",
});
onMounted(() => {
  console.log("roewefw", props.rowId);
  form.value.id = props.rowId;
});

const formRef = ref();
const rules = ref({
  money: [
    {
      required: true,
      message: "请输入核销金额",
      trigger: "blur",
    },
  ],
});
const form = ref({
  id: "",
  money: "",
});

const expressCompanyList = ref([
  { name: "韵达快递", value: 1 },
  { name: "顺丰快递", value: 2 },
  { name: "京东快递", value: 3 },
]);
//快递公司切换
const expressCompanyChange = (val) => {
  form.value.express_company = val;
};
const emits = defineEmits(["cancel", "confirm"]);

const handleAvatarSuccess = (response, uploadFile) => {
  // imageUrl.value = URL.createObjectURL(uploadFile.raw!)
};

// 取消
const onCancel = (formEl) => {
  if (!formEl) return;
  formEl.resetFields();
  emits("cancel");
};

// 确认
const onConfirm = (formEl) => {
  if (!formEl) return;
  formEl.validate((valid, fields) => {
    if (valid) {
      emits("confirm", form.value);
      console.log("submit!");
    } else {
      console.log("error submit!", fields);
    }
  });
  // emits("confirm", form.value);
};
</script>
 <style lang="stylus" scoped>
    .deliver-goods {
      .title {
        font-size: 24px;
      }

      .form-content {
        padding: 0px 66px;

        .require {
          padding: 16px 12px 0px 12px;
          border: 1px solid #E6E6E6;
        }

        .no-require {
          margin-left: 32px;
          padding: 16px 12px;
          border: 1px solid #E6E6E6;
        }
      }

      .input-width {
        width: 245px;
      }

      .btn {
        width: 178px;
      }

      .overdue {
        color: #E84026;
      }

      .refund {
        color: #2487E8;
      }

      .no-quota {
        margin-top: 200px;
      }

      // 上传图片相关
      .avatar-uploader .el-upload {
        border: 1px dashed #dcdfe6;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        transition: var(--el-transition-duration-fast);
      }

      .avatar-uploader .el-upload:hover {
        border-color: #dcdfe6;
      }

      .el-icon.avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 152px;
        height: 100px;
        text-align: center;
        border: 1px dashed #dcdfe6;
      }

      .avatar-uploader .avatar {
        width: 152px;
        height: 100px;
        display: block;
      }
    }
</style>
          